<template>
  <div ref="chart" class="charts chart-pie"></div>
</template>

<script>
export default {
  name: 'Semicircle',
  props: {
    dbcs: Number,
    type: String,
    color: {
      type: String,
      default: '#E25656'
    },
    bgColor: {
      type: String,
      default: 'rgba(59, 153, 218, 0.34)'
    },
    maxNum: { type: Number, default: 20 }
  },
  data() {
    return {}
  },
  watch: {
    dbcs(newVal) {
      console.log('new' + newVal)
      this.dbcs = newVal
      this.getEchartData()
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getEchartData()
    })
  },
  methods: {
    getEchartData() {
      const chart = this.$refs.chart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        if (this.type === '1') {
          this.color = '#E25656'
          this.bgColor = 'rgba(59, 153, 218, 0.34)'
        } else if (this.type === '2') {
          this.color = '#3B99DA'
          this.bgColor = 'rgba(226, 86, 86, 0.3)'
        }

        const option = {
          grid: {
            top: 0,
            bottom: 0,
            left: '10%',
            right: '10%'
          },
          xAxis: {
            show: false,
            type: 'value',
            boundaryGap: [0, 0]
          },
          yAxis: [
            {
              type: 'category',
              data: [''],
              axisLine: { show: false },
              axisTick: [
                {
                  show: false
                }
              ]
            }
          ],
          series: [
            {
              name: '数值',
              type: 'bar',
              zlevel: 1,
              itemStyle: {
                normal: {
                  barBorderRadius: 30,
                  color: this.color
                }
              },
              barWidth: 10,
              data: [this.dbcs]
            },
            {
              name: '背景',
              type: 'bar',
              barWidth: 10,
              barGap: '-100%',
              data: [this.maxNum],
              itemStyle: {
                normal: {
                  color: this.bgColor,
                  barBorderRadius: 30
                }
              }
            }
          ]
        }
        myChart.setOption(option)
        window.addEventListener('resize', function () {
          myChart.resize()
        })
      }
    }
  }
}
</script>

<style scoped>
.charts {
  width: 100%;
  height: 40px;
}
</style>
